<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="operatingrecord">
            <template #header>
                <div class="serchbox">
                    <div class="left">
                        <el-input v-model="queryData.keyWords" class="serchs" placeholder="请输入菜单名称" />
                        <el-button type="primary" text bg @click="paginaClick(1)">搜索</el-button>
                    </div>
                    <el-button type="primary" text bg @click="opendialog('新增菜单')">新增菜单</el-button>
                </div>
            </template>
            <el-table :data="pageData.list" style="width: 100%" row-key="id">
                <el-table-column prop="name" label="菜单名称"></el-table-column>
                <el-table-column prop="identification" label="菜单标识"></el-table-column>
                <el-table-column prop="path" label="菜单链接"></el-table-column>
                <!-- <el-table-column prop="redirect" label="重定向"></el-table-column> -->
                <el-table-column prop="explain" label="菜单说明"></el-table-column>
                <!-- <el-table-column label="修改人"> </el-table-column>
                <el-table-column label="修改时间"> </el-table-column> -->
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button type="primary" size="small" link @click="opendialog('新增子菜单', scope.row, 1)">新增子菜单</el-button>
                        <el-button type="primary" size="small" link @click="opendialog('编辑菜单', scope.row, 2)">编辑</el-button>
                        <el-button type="danger" size="small" link @click="removeMenus(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination> -->
        </el-card>
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
            <el-form :model="postData" label-width="80px">
                <el-form-item label="菜单名称">
                    <el-input v-model="postData.name" placeholder="请输入菜单名称" />
                </el-form-item>
                <el-form-item label="菜单标识">
                    <el-input v-model="postData.identification" placeholder="请输入菜单标识" />
                </el-form-item>
                <el-form-item label="菜单链接">
                    <el-input v-model="postData.path" placeholder="请输入菜单链接" />
                </el-form-item>
                <!-- <el-form-item label="重定向">
                    <el-input v-model="postData.name" placeholder="请输入重定向链接(非必填)" />
                </el-form-item> -->
                <el-form-item label="菜单排序">
                    <el-input-number v-model="postData.seq" :min="0" style="width: 100%" placeholder="请输入菜单排序" />
                </el-form-item>
                <el-form-item label="菜单说明">
                    <el-input v-model="postData.explain" :rows="2" resize="none" type="textarea" placeholder="请输入菜单说明" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onsubmit">确定</el-button>
                    <el-button @click="closedialog()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { createdMenu, putMenu, getMenu, deleteMenu } from "@/api/maintenance";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const dialogVisible = ref(false);
const dialogTitle = ref("新增菜单");
const postData: any = reactive({
    menuId: 0,
    parentId: 0,
    permission: "",
    path: "",
    identification: "",
    component: "Layout",
    hidden: "",
    explain: "",
    name: "",
    title: "",
    sysType: "",
    icon: "",
    activeMenu: "",
    seq: 0,
});

const closedialog = () => {
    dialogVisible.value = false;
};
watch(dialogVisible, (val: boolean) => {
    if (!val) {
        postData.menuId = 0;
        postData.parentId = 0;
        postData.permission = "";
        postData.path = "";
        postData.path = "";
        postData.identification = "";
        postData.hidden = "";
        postData.name = "";
        postData.title = "";
        postData.sysType = "";
        postData.icon = "";
        postData.activeMenu = "";
        postData.explain = "";
        postData.seq = 0;
    }
});
const opendialog = (t: string, row: any, type?: number | string | null) => {
    dialogTitle.value = t;
    if (type == 1) {
        // 新增子菜单
        postData.parentId = row.id;
    } else if (type == 2) {
        // 编辑菜单
        postData.menuId = row.id;
        postData.parentId = row.parentId;
        // postData.permission = row.permission;
        postData.path = row.path;
        postData.identification = row.identification;
        postData.component = row.component;
        // postData.hidden = row.hidden;
        postData.name = row.name;
        // postData.title = row.title;
        // postData.sysType = row.sysType;
        // postData.icon = row.icon;
        // postData.activeMenu = row.activeMenu;
        postData.seq = row.seq;
        postData.explain = row.explain;
    }
    dialogVisible.value = true;
};
const onsubmit = () => {
    if (!postData.name) {
        ElMessage.error("请输入菜单名称");
        return;
    }
    // if (!postData.identification) {
    //     ElMessage.error("请输入菜单标识");
    //     return;
    // }
    // if (!postData.path) {
    //     ElMessage.error("请输入菜单链接");
    //     return;
    // }
    postData.title = postData.name;
    if (postData.menuId === 0) {
        // 新增
        createdMenu(postData).then((res: any) => {
            ElMessage.success("添加成功");
            dialogVisible.value = false;
            getPageData();
        });
    } else {
        // 修改
        putMenu(postData).then((res: any) => {
            ElMessage.success("修改成功");
            dialogVisible.value = false;
            getPageData();
        });
    }
};
const removeMenus = (row: any) => {
    ElMessageBox.confirm("确定要删除该菜单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        deleteMenu(row.id).then((res: any) => {
            ElMessage.success("删除成功");
            getPageData();
        });
    });
};
const pageData = reactive({
    list: [],
    total: 0,
});
const queryData = reactive({
    pageNum: 1,
    pageSize: 10,
    keyWords: "",
});
const getPageData = () => {
    getMenu(queryData).then((res: any) => {
        pageData.list = treeDataTranslate(res.data);
    });
};
getPageData();
// 分页
const paginaClick = (val: number) => {
    queryData.pageNum = val;
    getPageData();
};
const treeDataTranslate = (data: any, id = "id", pid = "parentId") => {
    var res: any = [];
    var temp: any = {};
    for (var i = 0; i < data.length; i++) {
        temp[data[i][id]] = data[i];
    }
    for (var k = 0; k < data.length; k++) {
        if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
            if (!temp[data[k][pid]]["children"]) {
                temp[data[k][pid]]["children"] = [];
            }
            if (!temp[data[k][pid]]["_level"]) {
                temp[data[k][pid]]["_level"] = 1;
            }
            data[k]["_level"] = temp[data[k][pid]]._level + 1;
            temp[data[k][pid]]["children"].push(data[k]);
        } else {
            res.push(data[k]);
        }
    }
    return res;
};
</script>
<style scoped lang="scss">
.operatingrecord {
    .serchbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .serchs {
                width: 300px;
                margin-right: 20px;
            }
        }
    }
}
</style>
